<template>
  <div class="layout">
    <div class="title">浏览趋势</div>
    <div class="search">
      <div class="search_title">客户搜索</div>
      <el-input
        v-model="search"
        :prefix-icon="Search"
        size="small"
        placeholder="请输入客户名称进行查找"
        class="search_input"
      />
    </div>
    <el-table :data="filterTableData" style="width: 100%">
      <el-table-column label="客户" align="center" width="120">
        <template #default="scope">
          <div style="display: flex; align-items: center">
            <div class="avatar"></div>
            <span style="margin-left: 10px">{{ scope.row.name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="设备" prop="facility" />
      <el-table-column label="播放时间" prop="data" />
      <el-table-column label="播放时长" prop="duration" />
      <el-table-column label="分享成员" prop="member" />
    </el-table>
    <ZWPagination></ZWPagination>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@element-plus/icons-vue'
import { duration } from 'moment'
import { ref, computed } from 'vue'
import ZWPagination from "@/components/ZWPagination.vue"

interface User {
  name: string
  facility: string
  data: string
  duration: string
  member: string
}

const search = ref('')
const filterTableData = computed(() =>
  tableData.filter(
    (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase())
  )
)
const tableData: User[] = [
  {
    name: 'Tom',
    facility: 'IOS',
    data: '2022/03/26 12:23:03',
    duration: '3分26秒',
    member: 'IU'
  },
  {
    name: 'John',
    facility: 'IOS',
    data: '2022/03/26 12:23:03',
    duration: '3分26秒',
    member: 'IU'
  },
  {
    name: 'Morgan',
    facility: 'IOS',
    data: '2022/03/26 12:23:03',
    duration: '3分26秒',
    member: 'IU'
  },
  {
    name: 'Jessy',
    facility: 'IOS',
    data: '2022/03/26 12:23:03',
    duration: '3分26秒',
    member: 'IU'
  }
]
</script>
<style scoped lang="scss">
.layout {
  height: 624px;
  padding: 35px 30px;
  box-sizing: border-box;
  background-color: #ffffff;
  .title {
    margin-bottom: 21px;
    padding-bottom: 17px;
    border-bottom: 1px solid #eaeaea;
  }
  .search {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    &_title {
      font-size: 14px;
      font-weight: 300;
      color: #33302d;
      line-height: 14px;
      margin-right: 8px;
    }
    .search_input {
      width: 280px;
      height: 36px;
    }
  }
  :deep .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 70px;
    line-height: 30px;
  }
  .avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ff6b00;
  }
}
</style>